<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平居中</title>
</head>
<style>
    /* .wrapper {
        display: block;
        background-color: red;
    }
    .son {
        display: block;
        background: green;
        width: 100px;
        height: 100px;
        /*  子元素水平居中 
        margin: auto;
        /* margin-left: auto;
        margin-right: auto; 
    } */


</style>

<body>
    <!-- <div class="wrapper">
        父元素
        <div class="son">
            子元素
        </div>
    </div> -->

    <!-- <style>
        /* .center {text-align: center;} */
    </style>
    <div class="center">水平居中</div> -->
    
    <!-- <style>
        .center{
            background-color: green;
            /* width:200px; */
            width: 50%;
            margin:0 auto;
            border:1px solid red;
        }
    </style>

    <div class="center">水平居中</div> -->
  
    <!-- <style>
        .center{
            /* display:flex; */
            /* justify-content:center; */
            text-align: center;
        }
        .flex-div {
            background-color: red;
            display: inline-block;
        }
    </style>

    <div class="center">
        <div class="flex-div">1</div>
        <div class="flex-div">2</div>
    </div> -->
  
    <!-- <div class="table">
        <div class="row">
            <div class="cell">内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
            <div class="cell">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
            <div class="cell">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
        </div>
    </div>
    
    <style>
    .table {
        display: table;
        margin: 5px;
        width: 1000px;
        padding: 30px;
        border:1px solid red;
    }
    .row {
         display: table-row;
         padding:100px;
         margin:100px;
     }
     .cell {
        display: table-cell;
        padding: 10px;
        vertical-align: middle;     /*  定义行内元素垂直对齐 */
        height: 300px;
        border:1px solid green;

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    </style> -->

    <!-- <div class="container">
        <div class="row">
            <div class="cell">CELL A</div>
            <div class="cell">CELL B</div>
            <div class="cell">CELL C</div>
        </div>
    </div>

    <style>
        .container {
            display: table;
        }
        .row {
            display: table-row;
        }
        .cell {
            width: 100px;
            height: 100px;
            padding: 1em;
            vertical-align: middle;
            border: 1px solid blue;
            box-sizing: border-box;
            display: table-cell;
        }

    </style> -->

    <!-- <style>
        .center {
            width: 200px;
            height: 300px;
            display: table;
            border: 2px solid blue;
        }
        .table-div {
            display: table-cell;
            vertical-align: middle;
            border: 1px solid red;
        }

    </style>

    <div class="center">
        <div class="table-div">多行文本垂直居中</div>
    </div> -->

    <!-- <style>
        .center {
            width: 200px;
            height: 300px;
            display: flex;
            align-items: center;
            border: 2px solid blue;
        }
    </style>
 
    <div class="center">
        <div>垂直居中</div>
    </div> -->

    <style>
        .div {
            border: 2px solid green;
            padding: 10px;
        }   
        .p{
            border: 2px solid green;
            padding: 10px;
        }
    </style>

    <div class="div">我是div标签</div>
    <p class="p">我是p标签</p>

    
</body>
</html>